/**
 *  装车报表-数据分析 
 */

import { DatePicker, message, Select, Spin, Table } from "antd";
import { DataAnalysisBox } from "../../style";
import { DownloadOutlined } from '@ant-design/icons';
import { FC, useCallback, useEffect, useState } from "react";
import { ColumnsType } from "antd/es/table";
import { ISelectList } from "../../../../VehicleFile/api";
import { IDataAnalyseType, postDataAnalyse } from "../../api";
import dayjs from "dayjs";
import axios from "axios";
import { basicIp } from "../../../../../api/http";
const DataAnalysis: FC<
    { options: ISelectList[] }
> = ({ options }) => {
    const [goodValue, setGoodValue] = useState<string>('');
    const [yearValue, setYearValue] = useState<string>(dayjs().format('YYYY'));
    const [listData, setListData] = useState<IDataAnalyseType[]>([]); //列表数据
    const [jData, setJData] = useState<IDataAnalyseType[]>([]); // 季度数据
    const [xiaozaiLoading, setXiaozaiLoading] = useState(false); //下载loading
    const columns: ColumnsType<IDataAnalyseType> = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => <span>{index + 1}</span>
        },
        {
            title: "名称",
            align: "center",
            dataIndex: "monthName",
        },
        {
            title: "净重(吨)",
            align: "center",
            dataIndex: "jzWeight",
        },
        {
            title: "车数(车)",
            align: "center",
            dataIndex: "jzCars",
        }
    ]

    useEffect(() => {
        // 当options存在且长度大于0时，设置goodValue
        if (options && options.length > 0) {
            setGoodValue(options[0].value);
        }
    }, [options]);

    const listFun = useCallback(async () => {
        if (goodValue) {
            const { code, msg, data } = (await postDataAnalyse({ good: goodValue, year: yearValue })) as {
                code: number;
                msg: string;
                data: {
                    shipJdDTOS: IDataAnalyseType[];
                    shipMonthDTO: IDataAnalyseType[]
                };
            }
            if (code === 20000) {
                setJData(data.shipJdDTOS);
                setListData(data.shipMonthDTO);
            } else {
                message.error(msg);
            }
        }

    }, [goodValue,yearValue])

    useEffect(() => {
        listFun()
    }, [listFun])

    const handleExport = () => {
        setXiaozaiLoading(true);
        const token: string = sessionStorage.getItem("token") as string;
            axios({
                method: "post",
                url: basicIp + "/gb-ship-form/exportData",
                data: { good: goodValue, year: yearValue },
                //重要：相应类型必须为blob 
                responseType: "arraybuffer",
                headers: {
                    satoken: token,
                },
            }).then((res) => {
                let contentDisposition = decodeURI(res.headers["content-disposition"]);
                let fileRegex = /([^(filename=)]+\.xlsx?)$/g;
                let result = contentDisposition.match(fileRegex)![0];
                var link = document.createElement("a");
                //将文件流信息传入
                link.href = window.URL.createObjectURL(new Blob([res.data]));
                link.download = result;
                link.click();
                window.URL.revokeObjectURL(link.href);
                setXiaozaiLoading(false);
            }).catch(() => {
                setXiaozaiLoading(false);
            });
    }

    return (
        <DataAnalysisBox>
            <div className="view-top">
                <div>数据分析</div>
                <div className="top-right">
                    {options.length > 0 && <Select
                        defaultValue={options[0].value}
                        style={{ marginRight: '1rem', width: '10rem' }}
                        onChange={(value) => setGoodValue(value)}
                        options={options}>
                    </Select>}
                    <DatePicker
                        picker="year"
                        allowClear={false}
                        defaultValue={dayjs()}
                        onChange={(date, dateString) => setYearValue(dateString as string)}
                    ></DatePicker>
                        <Spin spinning={xiaozaiLoading}>
         <DownloadOutlined  onClick={handleExport} />
      </Spin>
                   
                </div>
            </div>
            <ul className="view-main">
                <li>
                    <div className="li-top">
                        <div className="ji one">1</div>
                        <span>一季度</span>
                    </div>
                    <div className="li-main">
                        <div className="li-box">
                            <h2>{jData[0]?.jzWeight}
                                <span> 吨</span>
                            </h2>
                            <div>净重</div>
                        </div>
                        <div className="li-box">
                            <h2>{jData[0]?.jzCars}
                                <span> 车</span>
                            </h2>
                            <div>车数</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div className="li-top">
                        <div className="ji two">2</div>
                        <span>二季度</span>
                    </div>
                    <div className="li-main">
                        <div className="li-box">
                            <h2>{jData[1]?.jzWeight}
                                <span> 吨</span>
                            </h2>
                            <div>净重</div>
                        </div>
                        <div className="li-box">
                            <h2>{jData[1]?.jzCars}
                                <span> 车</span>
                            </h2>
                            <div>车数</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div className="li-top">
                        <div className="ji three">3</div>
                        <span>三季度</span>
                    </div>
                    <div className="li-main">
                        <div className="li-box">
                            <h2>{jData[2]?.jzWeight}
                                <span> 吨</span>
                            </h2>
                            <div>净重</div>
                        </div>
                        <div className="li-box">
                            <h2>{jData[2]?.jzCars}
                                <span> 车</span>
                            </h2>
                            <div>车数</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div className="li-top">
                        <div className="ji four">4</div>
                        <span>四季度</span>
                    </div>
                    <div className="li-main">
                        <div className="li-box">
                            <h2>{jData[3]?.jzWeight}
                                <span> 吨</span>
                            </h2>
                            <div>净重</div>
                        </div>
                        <div className="li-box">
                            <h2>{jData[3]?.jzCars}
                                <span> 车</span>
                            </h2>
                            <div>车数</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div style={{ padding: '1rem 2rem' }}>
                <Table
                    columns={columns}
                    dataSource={listData}
                    pagination={false}
                    rowKey="monthName"
                    scroll={{ y: "25rem" }}
                />
            </div>

        </DataAnalysisBox>
    )
}

export default DataAnalysis;